
@extends('layout.default')

@section('layout.content') 

<div class="row">
  <div class="col-xs-12">
  	<table class="table table-hover table-bordered table-striped">
  		<thead>
        <tr>
          <th style="min-width:150px;">角色</th>
          <th style="min-width:350px;">权限</th>
        </tr>
      </thead>

      <tbody>
        @foreach ($roles as $key=>$role)
        <tr>
          <td class="td-role">
            {{ $role->name }} ({{ $role->value }})
            <div class="pull-right operate">
              <a href="javascript:;" class="red edit-role" data-id="{{$role->id}}"><i class="fa iconfont">&#xe760;</i></a>
            </div>
          </td>
          <td>
            @foreach($role->permissions as $parent)
            <div class="block">
              <label class="bigger-110"><b> {{$parent->title}} </b></label>
              @foreach ($parent->children as $permission)
                <label class="grey" style="padding-left:10px;"> {{$permission->title}} </label>
                @if( count($permission->children)>0 )
                （
                  @foreach($permission->children as $child)
                  <label class="grey" style="padding-left:4px;"> {{$child->title}}</label>
                  @endforeach
                 ）
                @endif
              @endforeach
            </div>
            @endforeach
          </td>
        </tr>
        @endforeach
      </tbody>
  	</table>
    
  </div><!-- /.col -->
</div><!-- /.row -->

@stop

@section('javascript')
<script type="text/javascript">

  $(function() {
    
    $('.edit-role').on('click', function() {
      var id = $(this).data('id');
      var uri = '/system/role/'+id+'/edit';      
      layer.open({
          type: 2,
          title: '角色权限设置',
          area: ['790px', '480px'],
          shade: 0.8,
          content: uri,
        });      
    });
   

    $('.td-role').on('mouseenter', function () {
        $(this).find('.operate').show();
    }).on('mouseleave', function () {
        $(this).find('.operate').hide();
    });

  });

</script>
@stop